<template>
	<view>
		<u-checkbox-group  shape="circle" v-model="checkboxValue1" @change="checkboxChange">
			<view class="photoBox">
				<view style="position: relative; width: 30%; " v-for="(item, index) in checkboxList1" :key="index">
						<u-checkbox v-if="isEdit" size="30" 
						:customStyle="{marginBottom: '8px',position:'absolute',right:'8px',top:'5px',zIndex: '9999'}"  :name="item.name">
						</u-checkbox>
						<u--image radius="25rpx" :src="item.img"  ></u--image>
				</view>
			</view>
			
			
		</u-checkbox-group>
		
		<!-- 按钮 -->
		<view class="space-around buttonBox">
			<view v-if="!isEdit" class="editBox" @click="isEdit = true">
				<text>编辑</text>
			</view>
			<view v-else class="editBox" @click="isEdit = false">
				<text>取消</text>
			</view>
			<view v-if="!isEdit" class="uploadBox">
				<text>上传照片</text>
				<!-- <u-icon name="close-circle"></u-icon> -->
			</view>
			
			<view v-else style="background: #F2F3F5;" class="uploadBox">
				<u-icon color="#000000" size="40" name="close-circle"></u-icon>
				<text style="margin-left: 10rpx;color: #000000;">删除</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isEdit:false,
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [{
						name: '苹果',
						img: 'https://cdn.uviewui.com/uview/album/1.jpg',
						disabled: true
					},
					{
						name: '香蕉',
						img: 'https://cdn.uviewui.com/uview/album/1.jpg',
						disabled: false
					},
					{
						name: '橙子',
						img: 'https://cdn.uviewui.com/uview/album/1.jpg',
						disabled: false
					},
					{
						name: '苹果',
						img: 'https://cdn.uviewui.com/uview/album/1.jpg',
						disabled: true
					},
					{
						name: '香蕉',
						img: 'https://cdn.uviewui.com/uview/album/1.jpg',
						disabled: false
					},
					{
						name: '橙子',
						img: 'https://cdn.uviewui.com/uview/album/1.jpg',
						disabled: false
					},{
						name: '橙子',
						img: 'https://cdn.uviewui.com/uview/album/1.jpg',
						disabled: false
					}
				],
			}

		},
		methods: {
			checkboxChange(n) {
				console.log('change', n);
			}
		}
	}
</script>

<style>
	.photoBox{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 30rpx;
	}
	.editBox{
		width: 30%;
		height: 58px;
		border-radius: 14px;
		opacity: 1;
		background: #FFFFFF;
		border: 1px solid #E5E5E5;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	.uploadBox{
	border-radius: 14px;
		width: 50%;
		height: auto;
		opacity: 1;
		background: #4A43EC;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}
	.buttonBox{
		width: 100%;
		position: fixed;
		bottom: 80rpx;
	}
</style>